<template>
  <div class="follow">
    <!-- 列表 -->
    <sing-table :data="this.$data" :list="list" :selection="false">
      <template v-slot:option="scope">
        <div>
          <el-button type="text" @click="cancelAttention(scope.row.userId)"
            >取消关注</el-button
          >
        </div>
      </template>
    </sing-table>
  </div>
</template>

<script>
import Mixin from "@/mixins/list";
import columns from "./columns/index";
import apiCode from "@/api/apiConfig";

export default {
  name: "follow",
  mixins: [Mixin],
  components: {},
  data() {
    return {
      columns, // 列表字段
    };
  },
  created() {
    // 获取列表
    this.getList();
    // 监听列表刷新事件
    this.$on("global:followFresh", () => {
      this.getList();
    });
  },
  methods: {
    async getList() {
      this.loading = true;
      let result = await this.$get(`api/user/following`);
      this.loading = false;
      if (result && result.code === apiCode.code.success) {
        this.list = result.data || [];
      }
    },
    // 取消关注
    async cancelAttention(id) {
      const status = await this.$CONFIRM("取消关注？");
      if (status) {
        this.loading = true;
        const result = await this.$DELETE(`api/user/following/${id}`);
        this.loading = false;
        if (result && result.code === apiCode.code.success) {
          this.getList();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.follow {
  ::v-deep .el-table {
    .el-table__body-wrapper {
      height: calc(100vh - 200px);
    }
  }
}
</style>
